import DrawerFooter from '@/components/DrawerFooter';
import TauSimpleSelect from '@/components/TauSimpleSelect';
import { Button, Form, Input, NumberPicker } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { observable } from 'mobx';
import DialogChange from './DialogDIChange';
import AttachmentPanel from './AttachmentPanel';

const FormItem = Form.Item;

function ChargeForm({
  data: origin,
  onSubmit,
  onCancel,
  dataSource,
  driverDataSource,
  dICurCharge,
  setDICurCharge,
  dIChargeOnSubmit,
  setDIState,
  setIdx,
  setDIIdx,
  dIState,
  driver,
}) {
  const [data] = useState(() => observable({ ...origin }));
  const [selectState, setSelectState] = useState([]);

  const { type } = driver || {};

  useEffect(() => {
    setSelectState(() =>
      driverDataSource?.map((p) => ({
        label: p.name,
        value: p.mainPhone,
      })));
  }, [driverDataSource]);

  /**
   * 保存数据
   * @param {*} value
   */
  const handleSetData = (value) => {
    _.assign(data, value);
  };

  const handleAddDriver = () => {
    setDIState((pre) => {
      const temp = [...pre];
      setDIIdx(dIState?.length);
      setDICurCharge({
        driverId: new Date().getTime(),
      });
      return temp;
    });
  };

  const handleOnSubmit = (__) => {
    onSubmit?.(data);
  };

  return (
    <Form labelAlign="top" fullWidth value={data} onChange={handleSetData} useLabelForErrorMessage>
      <FormItem label={t`大陆车牌`} name="mainlandLicense">
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <FormItem label={t`香港车牌`} name="hkLicense">
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <FormItem label={t`口岸`} name="ports">
        <TauSimpleSelect mode="multiple" dataSource={dataSource} />
      </FormItem>
      <FormItem label={t`车型`} name="vehicleModel">
        <Input placeholder={t`请输入车型`} />
      </FormItem>
      <FormItem label={t`载客人数`} name="passengerCapacity">
        <NumberPicker style={{ width: '100%' }} placeholder={t`请输入`} />
      </FormItem>
      {type === '0' && (
        <FormItem label={t`驾驶司机`} name="driverIds">
          <TauSimpleSelect mode="multiple" dataSource={selectState} />
          <FormItem style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button type="primary" text style={{ marginTop: 10 }} onClick={() => handleAddDriver()}>
              {t`添加司机>>`}
            </Button>
          </FormItem>
        </FormItem>
      )}
      <FormItem label={t`车辆照片`} name="attachments">
        <AttachmentPanel member={data} mode={'add'} />
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={handleOnSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
      <DialogChange dICurCharge={dICurCharge} setDICurCharge={setDICurCharge} dIChargeOnSubmit={dIChargeOnSubmit} />
    </Form>
  );
}

export default observer(ChargeForm);
